<template>
  <div>
    <!--
          必填
          action 指定上传，后面要用腾讯云服务器，给个#敷衍下
          file-list 必备数组管理图片，其中每个对象是一张图片，url 属性决定显示图片地址

          样式
          list-stype 影响渲染样式，指定 pricture-card 照片墙
          :class 动态类名, 根据当前文件列表长度改变, 有图片就不显示上传图标

          钩子
          on-preview 图片被点击时的处理方式，绑定了会出现放大镜，需要自己显示弹窗
          on-remove 删除图片的时候触发的功能

          上传相关
          http-request 替换action的默认上传行为
          beforeUpload 上传前校验，如果返回false则会组织上传
       -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"

      :class="{ hasImg : fileList.length > 0 }"
      :on-preview="onPreview"
      :on-remove="onRemove"
      :on-change="onChange"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="isShowPercent" :percentage="precent" style="width:166px" />
    <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="precent" style="width:146px" /> -->
    <!-- 弹窗，弹出图片预览的照片 -->
    <el-dialog title="预览" :visible="isShowDialog" @close="isShowDialog=false">
      <el-row type="flex" justify="center">
        <img :src="previewImg" alt="">
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
var COS = require('cos-js-sdk-v5')
var cos = new COS({
  SecretId: 'AKID4wYtxkGWVDepjMimeGbeRxB8pFOGtLVO',
  SecretKey: 'd07wUmnWy94i5AzXnmVy93i7F6g03pJY'
})
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {
      isShowPercent: false, // 控制进度条显示影藏的变量
      precent: 0, // 进度条的百分比
      fileList: [
        // 文件列表每个对象都是一张图片, 最重要的是url属性
        // 其实上传组件会自动添加其他必备属性, 如 uid 唯一标识, status 状态
      ],
      isShowDialog: false,
      previewImg: ''
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    //   图片预览的钩子
    onPreview(file) {
      console.log(file)
      this.isShowDialog = true
      this.previewImg = file.url
    },
    // 移除文件的时候触发的钩子函数
    onRemove(file, newFileList) {
    // file 表示删除之前的数组里面保存的对象
    // newFileList 表示删除之后的数组
      console.log(67, file, newFileList)
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      // 由于 fileList 的绑定时单项，所以用户添加了图片
      // 不会自动放入 this.fileList,需要在这个钩子函数，手动替换
      this.fileList = newFileList
    },
    // 替换action的默认上传行为
    httpRequest(params) {
      console.log('正式上传', params)
      cos.putObject({
        Bucket: 'song-0026-1309641955', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 英文部分*/
        Key: params.file.name, /* 必须 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段*/
        StorageClass: 'STANDARD',
        Body: params.file, // 上传文件对象
        onProgress: (progressData) => {
          //  上传文件开始，需要手动开启进度条
          this.isShowPercent = true
          //  上传图片文件的进度
          console.log(JSON.stringify(progressData))
          this.precent = progressData.percent * 100
        }
      }, (err, data) => {
        console.log('腾讯云工具库上传完毕回调函数')
        console.log(err || data)
        // 上传完毕，需要手动将进度条影藏
        // 需要等待动画完成后，再进行隐藏，增加用户体验
        setTimeout(() => {
          this.isShowPercent = false
        }, 1000)
        //  这里需要手动设置fileList里头的数据
        this.fileList[0].url = 'http://' + data.Location
        this.fileList[0].status = 'success'
      })
    },
    // 上传文件时的校验
    beforeUpload(file) {
      // 校验格式
    //   白名单
      const typeList = ['image/jpeg', 'image/png', 'image/gif']
      if (!typeList.includes(file.type)) {
        this.$message.error('目前只支持 jpg/png/gif 图片')
        return false
      }
      // 校验大小
      const maxSize = 1024 * 1024
      if (file.size > maxSize) {
        this.$message.error('图片大小不能超过1M')
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.hasImg {
  // /deep/ .el-upload--picture-card {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
  }
  ::v-deep img {
  object-fit: cover;
}
</style>
